<template>
	<table 
		class="glass-table"
		border="0">
		<tr class="glass-table__header">
			<th 
				v-for="item in headers"
				:key="item">
				{{ item }}
			</th>
		</tr>
		<tr 
		
			class="glass-table__body"
			v-for="rowDataObj in data">
			<td 
				v-for="(value,key) in rowDataObj"
				:key="value">
				{{ value }}
			</td>
		</tr>
	</table>
</template>

<script>
	
    export default {
		props: {
			headers: {
				type: Array,
			},
			data: {
				type: Array,
			}
		},
        data() {
            return {

            }
        }
    }
</script>

<style lang="scss" scoped>
	.glass-table {
		width: 100%;
		border-radius: 2px;
		// padding: 5px 10px;
		border-collapse: collapse;
		overflow: hidden;
		background-color: rgba(255, 255, 255, 0.25);
		
		td,th {
			text-align: center;
			border: 1px solid #ffffff54;
			padding: 5px 10px;
		}
		&__header {
		}
		&__body {
			
		}
	}
</style>


